<!-- 动态 -->
<template>
  <div class="activity-item">
    <div class="activity-item-head">
      <van-image
        :src="props.itemData.avatar"
        fit="cover"
        @click="avaterClick"
      />
      <div class="activity-item-name">
        <h4>{{ props.itemData.anchorName }}</h4>
        <div class="labels" v-if="props.isLabel">
          {{ props.itemData.updateTime }}
        </div>
      </div>
    </div>
    <div class="activity-item-content">{{ props.itemData.content }}</div>
    <div
      class="activity-item-content-photo"
      v-if="props.itemData.dynamicImages"
    >
      <ActivivtyPhoto
        :photoList="props.itemData.dynamicImages"
        v-if="props.itemData.isBy"
      />
      <div class="lock-main" v-else>
        <van-grid :border="false" square :column-num="3">
          <van-grid-item
            v-for="item in props.itemData.dynamicImages"
            :key="item"
          >
            <div class="grid-box-main grid-box-main-img">
              <van-image
                radius="8"
                style="width: 100%; height: 100%"
                fit="cover"
                position="center"
                :src="item"
              />
            </div>
          </van-grid-item>
          <van-grid-item
            v-for="item in props.itemData.dynamicImgNum"
            :key="item"
          >
            <div class="grid-box-main" @click="viewImg()">
              <div class="grid-box-main-content">
                <img src="../../assets/image/lock.png" />
                <p>解锁</p>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
  <van-popup
    v-model:show="show"
    close-icon="close"
    position="center"
    teleport="body"
    :closeable="false"
    :style="{ height: '30%', width: '60%', background: 'none' }"
  >
    <div class="top-up-gold-coin-content">
      <div class="top-up-gold-coin">
        <img src="../../assets/image/img12.png" />
        <div class="top-up-gold-coin-main">支付<span>5</span>金币解锁</div>
        <div class="action-btn">
          <van-button round size="small" type="success" @click="show = false"
            >关闭</van-button
          >
          <van-button
            round
            size="small"
            type="success"
            :loading="isLoading"
            @click="unlock"
            >解锁</van-button
          >
        </div>
      </div>
    </div>
  </van-popup>
</template>
  <script setup>
import { reactive, toRefs, ref } from "vue";

import { useRoute, useRouter } from "vue-router";

import ActivivtyPhoto from "@/components/activityItem/photo.vue";

import { UnLockActivity } from "@/api/index.js";

const route = useRoute();

const props = defineProps({
  isLabel: {
    type: Boolean,
    default: true,
  },
  itemData: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(["UnlockSuccess"]);

const state = reactive({
  labelsColor: [
    "#ff5e95",
    "#feac20",
    "#21e4e0",
    "#9670ff",
    "#ff7ca0",
    "#4ea9fc",
  ],
});

const { tabsList, labelsColor } = toRefs(state);
const router = useRouter();

const avaterClick = () => {
  router.push({
    name: "activityDetail",
    query: {
      anchorId: props.itemData.anchorId,
    },
  });
};

let show = ref(false);

const viewImg = () => {
  show.value = true;
};

// 解锁图片
import { showToast, showDialog } from "vant";
let isLoading = ref(false);
const unlock = async () => {
  console.log(111)
  let params = {
    id: props.itemData.id,
  };
  console.log(222)
  isLoading.value = true;
  try {
    let { data } = await UnLockActivity(params);
    showToast("解锁成功");
    isLoading.value = false;
    // 解锁成功
    emits("UnlockSuccess", data);
    show.value = false;
  } catch (error) {
    isLoading.value = false;
  }
};
</script>
  
  
  
  <style lang="scss" scoped>
.activity-item {
  padding: 10px;
  border-radius: 15px 15px 0 0;
  background: #fff;
  margin-top: 10px;
}
.activity-item-head {
  display: flex;
  align-items: center;
  .van-image {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    border-radius: 32px;
    overflow: hidden;
  }
  .activity-item-name {
    h4 {
      font-size: 14px;
      font-weight: normal;
    }
    .labels {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #999;
    }
  }
}
:deep(.van-grid-item__content) {
  width: 100%;
  padding: 0 !important;
  .van-image {
    width: 100%;
    height: 100%;
    margin-bottom: 2px;
  }
}
.activity-item-main {
  margin-top: 10px;
}
.activity-item-content {
  padding-left: 45px;
  margin-top: 5px;
  font-size: 14px;
  color: #999;
}
.activity-item-content-timer {
  color: #999;
  font-size: 14px;
}
.image-box1 {
  width: 50%;
  height: 30vh;
  border-radius: 8px;
}
.activity-item-content-photo {
  padding-left: 45px;
}
.grid-box-main {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  width: 95%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  .grid-box-main-content {
    img {
      width: 40%;
      margin: 0 auto;
      display: block;
    }
    p {
      color: #fff;
      text-align: center;
      font-size: 14px;
      margin-top: 3px;
    }
  }
}
.grid-box-main-img{
  padding: 0;
}
.lock-main {
  position: relative;
  left: -5px;
  margin-top: 10px;
}
.top-up-gold-coin-content {
  padding: 20px 0;
}
.top-up-gold-coin {
  border-radius: 8px;
  background: #fff;
  img {
    display: block;
    margin: 0 auto;
    position: relative;
    top: -25px;
  }
}
.top-up-gold-coin-main {
  flex: none;
  width: 100%;
  text-align: center;
  margin-top: -10px;
  span {
    font-size: 24px;
    margin: 0 5px;
  }
}
:deep(.van-popup) {
  background: none;
}
.action-btn {
  display: flex;
  justify-content: center;
  padding: 20px;
  .van-button:nth-child(1) {
    background: #eee;
    color: #999;
  }
  .van-button {
    width: 60%;
    margin: 0 5px;
    padding: 0 20px;
    background: $default-color;
    border: none;
    color: #fff;
  }
}
</style>
  